<template>
  <div>
    <v-header></v-header>
    <div class="line"></div>
    <!--导航栏-->
    <v-menu></v-menu>
    <div class="musicBody">
      <el-page-header content="歌单详情页" title="Back" @back="$router.push('/musicSheetV2')"
                      style="color: #7d7d7d;margin-top: 20px"></el-page-header>
      <el-container style="margin-top:20px">
        <el-aside width="200px">
          <!--图片显示区域-->
          <el-image
            style="width: 180px; height: 180px"
            :src="musicSheet.imgUrl"
            fit="fill"
            placeholder></el-image>
          <!--信息显示区域-->
          <div style="line-height:23px;font-size: 14px;margin-top: 20px;word-wrap:break-word">
            <p><em style="color: #7d7d7d">名称：</em>{{musicSheet.specialName}}</p>
            <p><em style="color: #7d7d7d">创建人：</em>{{musicSheet.userName}}</p>
            <p><em style="color: #7d7d7d">更新时间：</em>{{musicSheet.publishTime}}</p>
          </div>
          <div style="line-height:23px;margin-top: 20px;font-size: 14px;word-wrap:break-word">
            <p>
              <em style="color: #7d7d7d">简介：</em>{{musicSheet.intro}}
            </p>
          </div>
        </el-aside>
        <el-divider direction="vertical" class="el-divider--vertical"></el-divider>
        <el-main>
          <el-table :data="sheetMusicList"
                    style="width: 100%"
                    v-loading="loading"
                    element-loading-text="Loading..."
                    element-loading-svg-view-box="-10, -10, 50, 50">
            <el-table-column prop="fileName" label="歌曲名" width="510"/>
            <el-table-column prop="component" width="150">
              <template slot-scope="scope">
                <el-link :underline="false" v-show="true" @click="toPlayMusic(scope.$index)"><i
                  class="iconfont icon-bofangsanjiaoxing"></i>
                </el-link>
                &nbsp;
                <el-link :underline="false" v-show="true" @click="toPlayMusicComment(scope.$index)"><i class="iconfont icon-xiaoxi"></i></el-link>
                &nbsp;
                <el-link :underline="false" v-show="true" @click="likeMusic(scope.$index)">
                  <div v-if="sheetMusicList[scope.$index].likeFlag === 1">
                    <i class="iconfont icon-xin2" style="color: red"></i>
                  </div>
                  <div v-else>
                    <i class="iconfont icon-xin"></i>
                  </div>
                </el-link>
                &nbsp;
              </template>
            </el-table-column>
            <el-table-column prop="timeLength" label="时长"/>
          </el-table>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
  import header from '../layout/Header.vue'
  import footer from '../layout/Footer.vue'
  import menu from '../layout/Menu.vue'

  export default {
    name: "MusicSheetDetail",
    components: {
      'v-header': header,
      'v-footer': footer,
      'v-menu': menu
    },
    data() {
      return {
        musicSheet: {imgUrl:''},
        sheetMusicList: [],
        specialId: 0,
        loading: false,
      }
    },
    created() {
      document.title = '歌单详情';
      this.getMusicSheetById(this.$route.query.id);
    },
    mounted() {

    },
    methods: {
      //跳转到评论
      toPlayMusicComment(index){
        let routeUrl = this.$router.resolve({
          path: '/playMusicComment',
          query: {
            hash: this.sheetMusicList[index].hash,
            albumId: this.sheetMusicList[index].albumId
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //添加喜欢歌曲
      likeMusic(res) {
        if (sessionStorage.getItem("token") != null) {
          this.$axios({
            method: 'post',
            url: '/user/likeMusic',
            dataType: 'json',
            crossDomain: true,
            headers: {
              Authentication: sessionStorage.getItem("token")
            },
            data: {
              hash: this.sheetMusicList[res].hash,
              albumId: this.sheetMusicList[res].albumId
            }
          }).then(res1 => {
            if (res1.data.msgCode === '-1') {
              this.$message({
                message: '登录过期，请重新登录',
                type: 'warning'
              });
              this.$router.push('/login');
            } else {
              if (this.sheetMusicList[res].likeFlag === 1) {
                this.sheetMusicList[res].likeFlag = 0;
              } else {
                this.sheetMusicList[res].likeFlag = 1;
              }
            }
          })
        } else {
          this.$confirm('您还未登录，请先登录后添加喜欢', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          }).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            this.$router.push('/login')
          })
        }
      },
      //播放音乐
      toPlayMusic(res) {
        let routeUrl = this.$router.resolve({
          path: '/playMusic',
          query: {
            hash: this.sheetMusicList[res].hash,
            albumId: this.sheetMusicList[res].albumId
          }
        });
        this.$axios({
          method: 'post',
          url: '/redis/setMusicPlayQueue',
          data: {
            musicPlayQueue: this.sheetMusicList
          }
        }).then(res => {
          console.log(res.data);
          window.open(routeUrl.href, '_blank');
        });
      },
      //根据id获取歌单
      getMusicSheetById(id) {
        this.$axios({
          method: 'get',
          url: '/kugou/musicSheetById/' + id
        }).then(res => {
          this.musicSheet = res.data.data.info;
          this.specialId = this.musicSheet.specialId;
          this.getSheetMusicBySpecialId(this.specialId);
        })
      },
      //根据歌单id获取歌曲
      getSheetMusicBySpecialId(specialId) {
        this.loading = true;
        this.$axios({
          method: 'get',
          url: '/kugou/sheetMusic/' + specialId,
          headers: {
            token: sessionStorage.getItem("token")
          }
        }).then(res => {
          this.sheetMusicList = res.data.data.info;
          this.loading = false;
        });
      }
    }
  }
</script>

<style scoped>
  /deep/ .el-divider--vertical {
    display: inline-block;
    width: 1px;
    height: auto;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }
</style>
